<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电影天堂 - 看电影就上电影天堂</title>
    <link rel="stylesheet" href="/css/style.css">
    <script src="/js/axios.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <script src="/js/jquery-3.7.1.min.js" th:src="@{/js/jquery-3.7.1.min.js}"></script>
</head>
<body>
<!-- 头部区域 -->
<header th:replace="~{top}"></header>

<!-- 主要内容区域 -->
<main>
    <section class="search-section">
        <div class="container">
            <h1>发现精彩电影</h1>
            <form method="get" th:action="@{/search}">
                <div class="search-box">
                    <label>
                        <input name="query" placeholder="搜索电影、演员、导演..." required type="text" th:value="${param.query}">
                    </label>
                    <button type="submit"><i class="fas fa-search"></i> 搜索</button>
                </div>
            </form>
        </div>
    </section>

    <section class="movie-filters">
        <div class="container">
            <h2>电影筛选</h2>
            <div class="filter-options">
                <div class="filter-group">
                    <label for="genre-filter">类型:</label>
                    <select id="genre-filter">
                        <option value="all">全部类型</option>
                        <option value="动作">动作</option>
                        <option value="喜剧">喜剧</option>
                        <option value="剧情">剧情</option>
                        <option value="科幻">科幻</option>
                        <option value="灾难">灾难</option>
                        <option value="奇幻">奇幻</option>
                        <option value="惊悚">惊悚</option>
                        <option value="悬疑">悬疑</option>
                        <option value="动画">动画</option>
                    </select>
                </div>
                <div class="filter-group">
                    <label for="region-filter">地区:</label>
                    <select id="region-filter">
                        <option value="all">全部地区</option>
                        <option value="中国">中国</option>
                        <option value="美国">美国</option>
                        <option value="日本">日本</option>
                        <option value="韩国">韩国</option>
                        <option value="欧洲">欧洲</option>
                        <option value="香港">香港</option>
                        <option value="法国">法国</option>
                        <option value="英国">英国</option>
                        <option value="意大利">意大利</option>
                    </select>
                </div>
                <div class="filter-group">
                    <label for="sort-filter">排序:</label>
                    <select id="sort-filter">
                        <option value="popularity">热播排行</option>
                        <option value="rating">评分排行</option>
                        <option value="date">最新上映</option>
                    </select>
                </div>
            </div>
        </div>
    </section>

    <section class="movie-list">
        <div class="container">
            <h2>电影列表</h2>
            <div class="grid" id="movie-grid">
                <!-- 电影卡片将通过JavaScript动态加载 -->
            </div>
            <div class="pagination">
                <button class="btn" id="prev-page">上一页</button>
                <span id="page-info">第1页</span>
                <button class="btn" id="next-page">下一页</button>
            </div>
        </div>
    </section>
</main>

<!-- 页脚区域 -->
<footer th:replace="~{footer :: footer}"></footer>

<!-- 站点 JavaScript -->
<script src="/js/main.js" th:src="@{/js/main.js}"></script>
<script src="/js/search.js"></script>
</body>
</html>